<template>
	<view class="main">
		<view class="toast" >
			<swiper class="toast-swiper" :autoplay="true" :interval="5000" :vertical="true" :circular="true">
				<swiper-item v-for="(item,index) in broadcastList" :key="index">
					<view class="toast-swiper-item">
						<image class="toast-swiper-item-img" src="@/static/image/home/alert_icon.png"></image>
						<view style="width: 1rpx;height:36rpx;background: #231815;margin-left:20rpx;"></view>
						<view class="toast-swiper-item-main">
							<text>{{item}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view @click="navTo('/pages/home/rule', {type:'team'})" style="text-align:center;position:absolute;;top:calc(var(--status-bar-height) + 130rpx);right:0;width: 110rpx;height:56rpx;line-height:56rpx;background:#0f0f0e;color: #fff;font-size:26rpx;
border-radius: 28rpx 0px 0px 28rpx;">{{$t('common.rules')}}</view>
		<view class="news">
			<view class="item" @click="navTo('/pages/team/xiangqing',{type: 'total'})">
				<view class="content">
					{{ $currency }}{{teamInfoTotal.commission || 0}}
				</view>
				<view class="desc">
					{{$t('team.totalrevenue')}}
				</view>
				<image class="slogan-icon" src="@/static/image/team/total_revenue.png" style="width:102rpx;height:99rpx;" mode="" />
			</view>
			<view class="item" @click="navTo('/pages/team/xiangqing',{type: 'member'})">
				<view class="content">
					{{teamInfoTotal.member || 0}}
				</view>
				<view class="desc">
					{{$t('team.size')}}
				</view>
				<image class="slogan-icon" src="@/static/image/team/team_size.png" style="width:96rpx;height:103rpx;" mode="" />
			</view>
			<view class="item" @click="navTo('/pages/team/xiangqing',{type: 'today'})">
				<view class="content">
					{{ $currency }}{{teamInfoTotal.today_commission || 0}}
				</view>
				<view class="desc">
					{{$t('team.obtainedtoday')}}
				</view>
				<image class="slogan-icon" src="@/static/image/team/obtained_today.png" style="width:102rpx;height:111rpx;" mode="" />
			</view>
			<view class="item" @click="navTo('/pages/team/count',{type: 'nottoday'})">
				<view class="content">
					{{ $currency }}{{teamInfoTotal.today_not_get_commission || 0}}
				</view>
				<view class="desc" @click.stop="tipsShow = !tipsShow">
					{{$t('team.notoday')}}
					<image src="@/static/image/goods/point_icon.png" style="width: 22rpx;height:22rpx;margin-left:10rpx;" mode="" />
					<view class="innerText fade-in" :style="[innerTextStyle]" v-if="tipsShow">
						<text :style="[]">{{$t('team.when')}}</text>
						<view style="width: 30rpx;height: 30rpx;transform:rotate(45deg);position:absolute;background:#fff;border-left:1rpx solid #efefef;border-top:1rpx solid #efefef;top:-16rpx;right:18rpx;">

						</view>
					</view>
				</view>
				<image class="slogan-icon" src="@/static/image/team/not_today.png" style="width:101rpx;height:114rpx;" mode="" />
			</view>
		</view>
		<view class="link-box u-flex">
			<view class="link-label">
				{{$t('invite.link')}}
			</view>
			<view class="bg u-flex u-row-between">
				<view class="link u-line-1">{{systemInfo.invite_url || 'www'}}</view>
				<view class="copy" @click="handleCopy">{{$t('invite.copy')}}</view>
			</view>
		</view>
		<view class="gift" v-if="systemInfo.hiearning_url" @click="toUrl(systemInfo.hiearning_url)">
			
		</view>
		<view class="invite" @click="navTo('/pages/team/invite')">
			<view class="win">
				{{ $t("invite.win")}}
			</view>
			<view class="each">
				{{ $t("team.each",{money1:systemInfo.invite_rate + '%'})}}
			</view>
		</view>
		<view class="goods">
			<view class="goods1">
				
			</view>
			<view class="goods2">
				{{$t('common.more')}}
			</view>
			<view class="goods3">
				
			</view>
		</view>
		
		<view :class="`Level${item}`" v-for="(item, index) in 3" :key="item">
			<view class="top" @click="navTo('./count', {level: item})">
				<view class="one">
					{{ $t("team.one",{num: lvNumber[item]})}}
				</view>
				<view class="details">
					{{ $t("common.details")}}
				</view>
				<view class="tu1">
					
				</view>
			</view>
			<view class="msg">
				<view class="box">
					<view class="box1">
						<view class="person">
							{{teamInfoMy[index].member}}
						</view>
						<view class="num">
							{{ $t("team.num")}}
						</view>	
					</view>
					<view class="box2">
						<view class="p1">
							{{ $currency }}{{teamInfoMy[index].commission}}	
						</view>
						<view class="total">
							{{ $t("team.totalrevenue")}}
						</view>	
					</view>
					<view class="box3">
						<view class="p2">
							{{teamInfoMy[index].commission_rate}}%
						</view>
						<view class="today">
							{{ $t("team.ratelabel")}}
						</view>	
					</view>
				</view>
					<view class="gray1" :class="[`level${item}bg`]">
						<view class="u-flex u-row-between">
							<view class="label">
								{{ $t("team.obtainedtoday")}}		
							</view>
							<view class="value">
								{{$currency + teamInfoMy[index].today_commission}}
							</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="label">	
								{{ $t("team.notoday")}}			
							</view>
							<view class="value">
								{{$currency + teamInfoMy[index].surpass_money}}
							</view>
						</view>
						<view class="u-flex u-row-between">
							<view class="label">		
								{{ $t("team.overthree")}}			
							</view>
							<view class="value">
								{{teamInfoMy[index].surpass_member}}
							</view>
						</view>
					</view>
			</view>
			
		</view>
		<tabbar page="/pages/team/team"></tabbar>
	</view>
</template>

<script>
	import {
		myteamlist,
		myteamtotal
	} from '@/api/team.js'
	import {
		broadcast
	} from '@/api/home.js'
	import {
		copyString
	} from '@/utils/utils.js'
	export default {
		components: {
		},
		data() {
			return {
				broadcastList: [],
				teamInfoTotal: {},
				teamInfoMy: [{"level":1,"member":0,"commission":0,"today_commission":0},{"level":1,"member":0,"commission":0,"today_commission":0},{"level":1,"member":0,"commission":0,"today_commission":0}],
				tipsShow: false,
				lvNumber: ['-','A','B','C'],
			}
		},
		onLoad() {
			this.load();
			this.loadBroadcast();
		},
		onReady() {
		},
		onShow() {
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			}
		},
		watch: {
		},
		methods: {
			async load() {
				let result = await myteamtotal()
				console.log(result)
				this.teamInfoTotal = result.total;
				this.teamInfoMy = result.myteam;
			},
			async loadBroadcast() {
				let result = await broadcast()
				this.broadcastList = result;
			},
			async toUrl(val) {
				const item = val;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
			handleCopy() {
				copyString(this.systemInfo.invite_url)
			},
		},
		onHide() {
		},
		destroyed() {
		},
		onPullDownRefresh() {
		},
		onPageScroll(e) {
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: var(--status-bar-height);
		padding-bottom: 120rpx;
		background-color: #F6F6F6;
		background-image: url(@/static/image/team/team_bg.png);
		background-repeat: no-repeat;
		background-size: 750rpx 630rpx ;
		overflow: hidden;
	}
	.toast {
		margin-top: 40rpx;
		padding: 0 40rpx;


		.toast-swiper {
			height: 70rpx;
			line-height: 70rpx;
			background:#ECECEC;
			border-radius: 10rpx;
			font-size:28rpx;

			.toast-swiper-item {
				display: flex;
				align-items: center;
				justify-content: center;

				.toast-swiper-item-img {
					width: 28rpx;
					height: 26rpx;
					image {
						margin-top: 10rpx;
						width: 28rpx;
						height: 26rpx;
					}
				}

				.toast-swiper-item-main {
					width: 80%;
					margin-left: 23rpx;
					margin-right: 0rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					.name {
						color: #FF3950;
						// color: $uni-text-color-primary;
					}
				}
			}
		}
	}
	.news{
		// overflow: hidden;
		margin: 0 26rpx;
		margin-top: 90rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.item {
			position: relative;
			padding: 30rpx;
			width: 342rpx;
			height: 212rpx;
			background: url(@/static/image/team/item_bg.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 6rpx;
		}
		.content {
			margin-top: 10rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			font-size: 42rpx;
		}
		.desc {
			position: relative;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			color: #AAAAAA;
		}
		.slogan-icon {
			position: absolute;
			left: 233rpx;
			bottom: 94rpx;
		}
	}
	.link-box {
		background: #fff;
		height: 160rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
		padding: 40rpx 30rpx;
		position: relative;
		overflow: hidden;
		text-align: center;
		border-radius: 30rpx;
		font-size: 32rpx;
		.code-label {
			color: #CD1A1A;
			font-size: 30rpx;
		}
		.copy {
			color: #2399FD;
			text-decoration: underline;
			margin-left:30rpx;
		}
		.bg {
			width: 540rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 21rpx;
			margin-left: 26rpx;
			font-size: 28rpx;

		}
		.link {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			color: #AAAAAA;
			font-size: 30rpx;
		}
	}
	.Membership{
		display: flex;
		.line1{
			margin-top: 32rpx;
			margin-left: 144rpx;
			width: 67rpx;
			height: 5rpx;
			background: #AAAAAA;
			opacity: 0.6;
			border-radius: 3rpx 2rpx 2rpx 3rpx;
		}
		
		.line2{
			margin-top: 32rpx;
			margin-left: 23rpx;
			width: 67rpx;
			height: 5rpx;
			background: #AAAAAA;
			opacity: 0.6;
			border-radius: 3rpx 2rpx 2rpx 3rpx;
		}
		
		.level{
			margin-top: 22rpx;
			margin-left: 23rpx;
			
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
		}
	}
	
	.gray{
		display: flex;
		margin-top: 71rpx;
		margin-left: 60rpx;
		width: 630rpx;
		height: 192rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		.left{
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 24rpx;
			.left1{
				margin-top: 30rpx;
				margin-left: 21rpx;
			}
			.left2{
				margin-top: 30rpx;
				margin-left: 21rpx;
			}
			.left3{
				margin-top: 30rpx;
				margin-left: 21rpx;
			}
		}
	}
	
	.right{
		font-size: 28rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #C17C1C;
		line-height: 20rpx;
		.right1{
			margin-top: 32rpx;
			margin-left: 40rpx;
		}
		.right2{
			margin-top: 34rpx;
			margin-left: 40rpx;
		}
		
		.right3{
			margin-top: 34rpx;
			margin-left: 40rpx;
		}
	}
	
	.gift{
		position: fixed;
		width: 117rpx;
		height: 117rpx;
		background-image: url(../../static/image/team/gift.png);
		background-size: 100%;
		bottom: 128rpx;
		right: 30rpx;
	}
	
	.invite{
		overflow: hidden;
		width: 710rpx;
		height: 198rpx;
		background-image: url(../../static/image/team/invite.png);
		background-position: 32rpx center;
		background-size: 100%;
		margin: auto;
		margin-top: 71rpx;
		.win{
			font-size: 34rpx;
			font-family: Rubik;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 52rpx;
			margin-top: 23rpx;
			line-height: 24rpx;
		}
		.each{
			margin-top: 28rpx;
			margin-left: 54rpx;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			font-style: italic;
			color: #FFFFFF;
		}
	}
	
		
	.goods{
		display: flex;
		.goods1{
			width: 120rpx;
			height: 2rpx;
			background: #AAAAAA;
			margin-left: 155rpx;
			margin-top: 71rpx;
		}
		
		.goods3{
			width: 120rpx;
			height: 2rpx;
			background: #AAAAAA;
			margin-left: 25rpx;
			margin-top: 71rpx;
		}
		
		.goods2{
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 24rpx;
			margin-left: 25rpx;
			margin-top: 60rpx;
		}
	}
	
	.Level1{
		width: 690rpx;
		height: 470rpx;
		background-image: url(../../static/image/team/level1.png);
		background-size: 100%;
		margin: 0 auto;
		margin-top: 40rpx;
		
		.top{
			display:flex;
			.one{
				
				margin-left: 22rpx;
				margin-top: 32rpx;
				font-size: 34rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #00A648;
				line-height: 24rpx;
			}
			
			.details{
				margin-left: 220rpx;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 300;
				color: #00A648;
				line-height: 21rpx;
			}
			
			.tu1{
				margin-left: 20rpx;
				margin-top: 32rpx;
				width: 13rpx;
				height:20rpx;
				background-image: url(../../static/image/team/tu1.png);
				background-size: 100%;
			}
		}
	}
	
	.msg{
		width: 650rpx;
		height: 352rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		overflow: hidden;
		
		.box{
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
		}
		.num,.total,.today{
			font-size: 24rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 24rpx;
			text-align: center;
			margin-top: 8rpx;
		}
		
		.box1{
			margin-left: 21rpx;
		}
		
		.box2{
			margin-left: 34rpx;
		}
		
		.box3{
			margin-left: 34rpx;
		}
		
		.person,.p1,.p2{
			text-align: center;
		}
		
		.person{
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			color: #0F0F0E;
		}
		
		.p1,.p2{
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			color: #FC3E32;
		}
		
		.gray1{
			padding: 0 22rpx;
			overflow: hidden;
			width: 610rpx;
			height: 193rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			margin: 30rpx 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.box4{
				font-size: 24rpx;
				font-family: Rubik;
				font-weight: 300;
				color: #65676B;
				margin: 30rpx 20rpx;
			}
		}
		.level1bg {
			background: #F3FFF2;
		}
		.level2bg {
			background: #F7F4FF;
		}
		.level3bg {
			background: #FFF9F2;
		}
	}
	
	.Level2{
		width: 690rpx;
		height: 470rpx;
		background-image: url(../../static/image/team/level2.png);
		background-size: 100%;
		margin: 0 auto;
		margin-top: 30rpx;
		.top{
			display:flex;
			.one{
				
				margin-left: 22rpx;
				margin-top: 32rpx;
				font-size: 34rpx;
				font-family: Rubik;
				font-weight: 400;
				color:#753696;
				line-height: 24rpx;
			}
			
			.details{
				margin-left: 220rpx;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 300;
				color: #753696;
				line-height: 21rpx;
			}
			
			.tu1{
				margin-left: 20rpx;
				margin-top: 32rpx;
				width: 13rpx;
				height:20rpx;
				background-image: url(../../static/image/team/tu2.png);
				background-size: 100%;
				
			}
		}
	}
	
	.Level3{
		width: 690rpx;
		height: 470rpx;
		background-image: url(../../static/image/team/level3.png);
		background-size: 100%;
		margin: 0 auto;
		margin-top: 30rpx;
		.top{
			display:flex;
			.one{
				
				margin-left: 22rpx;
				margin-top: 32rpx;
				font-size: 34rpx;
				font-family: Rubik;
				font-weight: 400;
				color:#A05802;
				line-height: 24rpx;
			}
			
			.details{
				margin-left: 220rpx;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 300;
				color:#A05802;
				line-height: 21rpx;
			}
			
			.tu1{
				margin-left: 20rpx;
				margin-top: 32rpx;
				width: 13rpx;
				height:20rpx;
				background-image: url(../../static/image/team/tu3.png);
				background-size: 100%;
				
			}
		}
	}
	.innerText {
		border: 1px solid #efefef;
		color: #0F0F0E;
		position: absolute;
		z-index: 99999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		background: #fff;
		width:400rpx;
		word-break: break-word;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		right: -18rpx;
		top: 60rpx;
	}
</style>
